{template 'header'}
<style>
.text-len { 
	visibility: hidden; 
	white-space: nowrap; 
	font-size: 24px; 
}
</style>
    <div class="g-flex" style="width: 100%; height: 100vh; max-width: 480px; justify-content: center; align-items: center; text-align: center;">
        <div style="width: 100%;">
            <div class="g-flex" style="font-size: 18px; color: rgb(0, 0, 0); margin-bottom: 8px; font-weight: bold; justify-content: center;">
                <img src="{RES}img/nore_suc.png" alt="" style="width: 25px; height: 25px; margin-right: 10px;">
                <p>发表成功</p>
            </div>
            <p style="color: rgb(74, 74, 74); font-size: 15px; margin-bottom: 8px;">长按保存图片，把学习心得分享给好友</p>
            <div>
                <img id="poster-pic" style="width: 62%;">
            </div>
        </div>
        <div class="" style="display: none;">
            <div class="g-mask is-deep"></div>
            <div style="color: rgb(255, 255, 255); text-align: center; position: fixed; width: 100%; height: 100vh; max-width: 480px; top: 0px; left: 0px;">
                <img class="arrow" src="{RES}img/arrow.png" alt="" style="position: absolute; right: 25px; top: 25px; width: 70px;">
                <p style="margin-top: 100px; font-size: 18px;">点击右上角三个点选项</p>
                <div style="font-size: 12px; width: 100%; text-align: center; margin-top: 26px;">
                    <img src="{RES}img/friendship.png" alt="" style="height: 75px;">
                    <p style="padding-top: 5px;">分享朋友圈</p>
                </div>
                <p style="margin-top: 20px; font-size: 20px;">快分享到朋友圈</p>
                <p style="margin-top: 10px; font-size: 20px;">邀请更多好友一起学习</p>
            </div>
        </div>
        <div class="g-modal  g-hidden">
            <div class="g-mask"></div>
            <div class="dialog">
                <div class="content">
                    <div>
                        <img class="g-margin-b" src="{RES}img/bremark-suc2.gif" alt="" style="width: 70px; height: 70px;">
                        <p>恭喜你打卡成功，获得1学分</p>
                        <p>坚持学习遇见更好的自己</p>
                    </div>
                </div>
                <div class="g-modal-footer"><a class="g-modal-btn active" href="javascript:;">继续努力</a>
                </div>
            </div>
        </div>
        <div class="g-modal  g-hidden">
            <div class="g-mask"></div>
            <div class="dialog">
                <div class="content">
                    <div>
                        <img class="g-margin-b" src="{RES}img/bremark-suc2.gif" alt="" style="width: 50px; height: 50px;">
                        <p>需分享至朋友圈才能成功打卡</p>
                        <p>获得1学分</p>
                    </div>
                </div>
                <div class="g-modal-footer"><a class="g-modal-btn active" href="javascript:;">我知道了</a>
                </div>
            </div>
        </div>
    </div>
</div>
<canvas id="myCanvas" width="750" height="1334" style="display:none;"></canvas>
{template 'loading'}
<script>
var avatar_pic = new Image();
avatar_pic.src = '{$mem["avatar"]}';
var nickname = '{$mem["nickname"]}';
var book_title = '{$book["title"]}';
var note_content = '{$note["content"]}';
var total_note = '{php echo $total_note>0?$total_note:0}';
var total_time = '{php echo $total_time>0?$total_time:0}';
var note_time = '{$note["createtime"]}';
avatar_pic.onload = function(e) {
	var qr_pic = new Image();
	qr_pic.src = '{$qrUrl}';
	qr_pic.onload = function(e) {
		var canvas = document.getElementById("myCanvas");
		var cxt = canvas.getContext("2d");
		var bg_pic = new Image();
		bg_pic.src = '{$cfg["poster_bg"][0]}';;
		bg_pic.onload = function(e) {
			cxt.drawImage(bg_pic,0,0,750,1334);
			//画会员头像
			cxt.drawImage(avatar_pic, 325, 110, 100, 100);
			//会员名字
			cxt.fillStyle = '#ffffff';
			cxt.font = "24px Arial";
			var nickname_len = parseInt(nickname.length) * 24;
			var nickname_left = (1334 - nickname_len) / 2 / 2;
			cxt.fillText(nickname, nickname_left, 260);
			//会员笔记总数
			cxt.font = "bold 50px Arial";
			cxt.fillText(total_note, 170, 395);
			//会员笔记总时长
			cxt.font = "bold 50px Arial";
			cxt.fillText(total_time, 470, 395);
			//书名
			cxt.fillStyle = '#333333';
			cxt.font = "bold 28px Arial";
			var start_str = 0;
			var title_len = parseInt(book_title.length) + 5;
			book_title = '读「'+book_title+'」有感';
			var t_row_num = Math.ceil(title_len / 16);
			for(var j=0;j<t_row_num;j++){
				var end_str = (j + 1) * 16;
				var sub_title = book_title.substring(parseInt(start_str),parseInt(end_str));
				var real_height = 510 + 55 + j * 45;
				cxt.fillText(sub_title, 175, real_height);
				start_str+=16;
				var content_height = 510 + 55 + j * 45;
			}
			//笔记内容
			cxt.fillStyle = '#999999';
			cxt.font = "24px Arial";
			var content_len = parseInt(note_content.length);
			var row_num = Math.ceil(content_len / 22);
			var start_str = 0;
			for(var i=0;i<row_num;i++){
				var end_str = (i + 1) * 22;
				var sub_content = note_content.substring(parseInt(start_str),parseInt(end_str));
				var real_height = content_height + 55 + i * 45;
				cxt.fillText(sub_content, 110, real_height);
				start_str+=22;
			}
			//笔记时间
			cxt.fillText('于 '+note_time+' 记', 370, 985);
			//二维码
			cxt.drawImage(qr_pic, 115, 1085, 200, 200);
			
			var u = navigator.userAgent, app = navigator.appVersion;
	    	var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
	    	var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
	    	if(isIOS){
	    		var src = canvas.toDataURL().replace("data:image/png;base64,","");
	    	}
	    	isAndroid = true;
	    	if(isAndroid){
	    		var src = canvas.toDataURL("image/png");
	    	}
	    	$('#poster-pic').attr('src', src);
		}
		
	}
}
</script>

</body></html>